<template>
	<view class="pl30 pr30">
		<u-tabs :list="tablist" :is-scroll="false" :current="current" @change="change" active-color="#D23030"></u-tabs>
		<u-empty text="没有数据" mode="list" v-if="list.length < 1"></u-empty>
		<!-- //瀑布流 -->
		<u-waterfall v-model="flowList" v-else ref="uWaterfall">
			<template v-slot:left="{leftList}">
				<view v-for="(item, index) in leftList" :key="index" class="mr30 mt30 itembox"
					@click.stop="gotoDetail(item)" v-if="item.video">
					<image :src="item.image" class="w330 radius16  coverimg" mode="aspectFill"></image>
					<image src="~@/static/image/index/play.png" class="playbtn"></image>
					<view class="fs26 mt20 mb20">{{item.member.name}}</view>
					<view class="flex row-between">
						<view class="flex" @click.stop="delVideo(item)">
							<text class="cuIcon-deletefill fs30 color-red"></text>
							<text class="color-red fs24 ml20">删除</text>
						</view>
						<view class="">
							<u-icon name="heart" v-if="item.is_give==0"></u-icon>
							<u-icon name="heart-fill" color="#D23030" v-else></u-icon>
							<text class="ml10" v-if="item.video">{{item.video.give}}</text>
						</view>
					</view>
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view v-for="(item, index) in rightList" :key="index" class="mt30 itembox"
					@click.stop="gotoDetail(item)" v-if="item.video">
					<image :src="item.image" class="w330 radius16 " mode="aspectFill"></image>
					<image src="~@/static/image/index/play.png" class="playbtn"></image>
					<view class="fs26 mt20 mb20">{{item.member.name}}</view>
					<view class="flex row-between">
						<view class="flex" @click.stop="delVideo(item)">
							<text class="cuIcon-deletefill fs30 color-red"></text>
							<text class="color-red fs24 ml20">删除</text>
						</view>
						<view class="">
							<u-icon name="heart" v-if="item.is_give==0"></u-icon>
							<u-icon name="heart-fill" color="#D23030" v-else></u-icon>
							<text class="ml10" v-if="item.video">{{item.video.give}}</text>
						</view>
					</view>
				</view>
			</template>
		</u-waterfall>
	</view>
</template>

<script>
	export default {
		name: "videoAdmin",
		onshow() {
			this.query.page=1
			this.getVideoList()
		},
		data() {
			return {
				//tab栏属性
				tablist: [{
					name: '收藏的视频 '
				}, {
					name: '发布的视频'
				}],
				current: 0,
				//获取列表参数
				query: {
					page: 1,
					size: 10,
					type: 0,
				},
				loadStatus: 'loadmore',
				flowList: [],
				list: []
			};
		},
		methods: {
			//获取视频列表
			getVideoList(cd) {
				this.$api.myVideo(this.query).then(res => {
					console.log(res)
					cd ? this.list = [...this.list, ...res.data] : this.list = res.data
					if (res.data.length < 1) {
						this.$msg('暂无更多数据')
						return
					}
					// this.flowList=[]
					this.$set(this, 'flowList', [])
					this.list.forEach((item, i) => {
						let item2 = JSON.parse(JSON.stringify(item))
						this.flowList.push(item2)
					})
					// for (let i = 0; i < 10; i++) {
					// 	// let index = this.$u.random(0, this.list.length - 1);
					// 	// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
					// 	let item = JSON.parse(JSON.stringify(this.list[index]))
					// 	// item.id = this.$u.guid();
					// 	this.flowList.push(item);
					// }
				})
			},
			// tab切换事件
			change(index) {
				//赋值选中项
				this.current = index;
				//赋值请求参数
				this.query.type = index
				//page重置为1
				this.query.page = 1
				//清空list
				// this.list = []
				this.$set(this, 'list', [])
				this.$set(this, 'flowList', [])
				// return
				//重新发起请求
				this.getVideoList()
			},
			//删除按钮
			delVideo(item) {
				let that = this
				console.log(item)
				let videoId = ''
				if (this.current == 0) {
					videoId = item.video_id
				} else {
					videoId = item.id
				}
				uni.showModal({
					title: '提示',
					content: '确认删除么?',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.$api.deleteVideo({
								id: videoId
							}).then(res => {
								// console.log(res)
								if (res.code == 1) {
									that.$msg('删除成功')
									that.query.page = 1
									that.$set(that, 'list', [])
									that.getVideoList()
								}
							})
						} else if (res.cancel) {
							that.$msg('您取消了删除')
						}
					}
				})
				
			},
			//前往视频详情
			gotoDetail(item) {
				console.log(item)
				if (this.current == 0) {
					uni.navigateTo({
						url: '/pages/shortVideo/detail?id=' + item.video_id
					})
				} else {
					uni.navigateTo({
						url: '/pages/shortVideo/detail?id=' + item.id
					})
				}
			}
		},
		// 触底加载更多
		onReachBottom() {
			//page+1
			this.query.page++
			//重新请求接口
			this.getVideoList('cd')
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.demo-warter {
		border-radius: 16rpx;
		margin: 10rpx;
		background-color: #ffffff;
		padding: 16rpx;
		position: relative;
	}

	.itembox {
		position: relative;
	}

	.playbtn {
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		width: 30rpx;
		height: 30rpx;
	}
</style>
